<!doctype html>
<html lang="en">
<head>
<title>Pie Chart</title>
<meta charset="utf-8">
<script src="pie.js"></script>
<style>
</style>
<script>

// kick things off
window.onload = createPieChart;

function createPieChart() {

	//
	// create a PieChart.
	// 
	var pieChart = new PieChart( "piechart", 
		{
			includeLabels: true, 
			data:   [15, 15, 15, 15, 15, 15,
			        15, 15, 15, 15, 15, 15,
			        15, 15, 15, 15, 15, 15,
			        15, 15, 15, 15, 15, 15, ],
			labels: ["Bankrup", "500", "225", "425", "300", "175",
                    "Buy a vowel", "125", "300", "200", "325", "100",
			        "Lose a turn", "450", "300", "200", "375", "100",
			        "Free Spin", "150", "250", "350", "275", "50" ],

			colors: [
            	["#2c3e50", "#2c3e50"], ["#e74c3c", "#e74c3c"], ["#e67e22", "#e67e22"], ["#d35400", "#d35400"], ["#f39c12", "#f39c12"], ["#2ecc71", "#2ecc71"],
                ["#c0392b", "#c0392b"], ["#f39c12", "#f39c12"], ["#f1c40f", "#f1c40f"], ["#FFDAB9", "#FFDAB9"], ["#E6E6FA", "#E6E6FA"], ["#1abc9c", "#1abc9c"],
                ["#2c3e50", "#2c3e50"], ["#e74c3c", "#e74c3c"], ["#f1c40f", "#f1c40f"], ["#FFDAB9", "#FFDAB9"], ["#27ae60", "#27ae60"], ["#1abc9c", "#1abc9c"],
                ["#8e44ad", "#8e44ad"], ["#7f8c8d", "#7f8c8d"], ["#3498db", "#3498db"], ["#d35400", "#d35400"], ["#8e44ad", "#8e44ad"], ["#16a085", "#16a085"],
			]
		}
	);

	//
	// nothing appears until you call draw().
	//
	pieChart.draw();

/*
 * If you want to draw the labels separately, you can set
 * includeLabels to false, and call drawLabel() for each
 * pie chart segment.
 *
	for (var i = 0; i < pieChart.labels.length; i++) {
		pieChart.drawLabel(i);
	}
 */

/*
 * If you want to select a segment to highight it, you can
 * call select() for a given segment. Here's a little snippet
 * that animates selecting each segment.
 *
	var segment = 0;
	function nextSegment() {
		pieChart.select(segment);
		segment++;
		if (segment < pieChart.data.length) {
			setTimeout(nextSegment, 1000);
		}
	}
	setTimeout(nextSegment, 1000);
 */

}
</script>
</head>
<body>

<canvas id="wheel" width="500" height="500">
</canvas>

</body>
</html>
